<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>pseudo-class</title>

        <style type="text/css">
            /* 未访问 */
            #div_test a:link {
                color: red;
            }

            /* 已访问 */
            #div_test a:visited {
                color: green;
            }

            /* 鼠标悬停 */
            #div_test a:hover {
                background: #007e7e;
                color: blue;
            }

            #div_test a:focus {
                color: #00ff00;
            }

            #div_test a:active {
                color: #ff00ff;
            }

            /* p 且 p是其父元素的第一个元素 */
            p:first-child {
                background: aqua;
            }

            /* 属于h1，且 em 且 em是其父元素的第一个元素*/
            h1 > em:first-child {
                background: red;
            }

            /* div 且 div是是其父元素的最后一个元素 */
            div:last-child {
                border-color: orange;
                border-width: 5px;
                border-style: solid;
            }
        </style>
    </head>
    <body>
        <!-- When test, clear history -->
        <div id="div_test">
            <a href="https://www.baidu.com/" title="baidu">2 baidu</a>
            <p><em> test</em></p>
            <p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
            <p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
        </div>

        <hr/>

        <div>
            <p><em> test</em></p>
            <a href="https://www.baidu.com/" title="baidu">2 baidu</a>
            <p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
            <p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
        </div>

        <hr/>

        <div>
            <h1><em> test</em></h1>
            <a href="https://www.baidu.com/" title="baidu">3 baidu</a>
            <h1>I am a <em>strong</em> man. I am a <em>strong</em> man.</h1>
            <h1>I am a <em>strong</em> man. I am a <em>strong</em> man.</h1>
        </div>
    </body>
</html>